{% extends 'base.html' %} {% block css%}
<style type="text/css">
  .txt {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    font-size: 18px;
    font-weight: bolder;
    padding-left: 10px;
    background: #eee;
  }

  .idx1 {
    width: 30px;
    height: 18px;
    border: 10px;
    font-size: 8;
    padding-left: 40px;
    padding-top: 0px;
    color: #ccc;
  }

  .idx2 {
    width: 80px;
    height: 18px;
    border: 10px;
    font-size: 8;
    padding-left: 50px;
    padding-top: 0px;
    color: #ccc;
  }

  .idx3 {
    width: 80px;
    height: 18px;
    border: 10px;
    font-size: 8;
    padding-left: 50px;
    padding-top: 0px;
    color: #ccc;
  }

  .txt1 {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    font-size: 18px;
    font-weight: bolder;
    padding: 0px;
    margin: 0px;
    background: #7d7dff;
  }

  .reg_bit {
    width: 40px;
    height: 30px;
    border: 0px solid #ccc;
    font-size: 15px;
    font-weight: bolder;
    padding-left: 5px;
    background: #7d7dff;
  }

  .txt2 {
    width: 80px;
    height: 30px;
    border: 1px solid #ccc;
    font-size: 18px;
    font-weight: bolder;
    padding: 0px;
    margin: 0px;
    background: #cbfd8d;
  }

  .reg_val_dec {
    width: 50px;
    height: 30px;
    border: 0px solid #ccc;
    font-size: 15px;
    font-weight: bolder;
    padding-left: 5px;
    margin-left: 20px;
    background: #cbfd8d;
  }

  .txt3 {
    width: 80px;
    height: 30px;
    border: 1px solid #ccc;
    font-size: 18px;
    font-weight: bolder;
    padding: 0px;
    margin: 0px;
    background: #ffb4e3;
  }

  .reg_val_hex {
    width: 50px;
    height: 30px;
    border: 0px solid #ccc;
    font-size: 15px;
    font-weight: bolder;
    padding-left: 5px;
    margin-left: 30px;
    background: #ffb4e3;
  }

  .page_title{
    font-size: 14px;
    color: #ccc;
  }
</style>
{% endblock %} {% block body%}
<h3>
 
  Pages View - {{ page_name }}
  &nbsp;&nbsp;
  <span class="page_title"> {{ page_title }} </span>

  <span class="pull-right">

<!--     <a href="#" id="get_vdm_all">VDM_All</a>
    &nbsp;&nbsp;
     -->
    <a href="/page_template?page_name={{ page_name }}" class="refresh">Refresh
    <i class="glyphicon glyphicon-refresh"></i>
    </a>
    &nbsp;&nbsp;
    <a href="#" id="up_page_nav"
      >Navigation
      <i
        class="
            glyphicon glyphicon-arrow-right"
      ></i
    ></a>
  </span>
</h3>

<table class="table table-hover">
  <tbody>

    <tr>
      <td width="10%">Address</td>
      <td width="20%">Name</td>
      <td width="40%" class="hide">Description</td>
      <td width="10%">Hex</td>
      <td width="10%">Dec</td>
      <td width="10%">Chr</td>
      <td width="10%">W/R Mask</td>
    </tr>

    {% for row in big_list %}
    <tr class="row_data">

      <td>{{ row[0] }}</td>
      <td>{{ row[1] |replace("<BR>", "") }}</td>
      <td class="hide">{{ row[2] }}</td>
      <td style="background-color: #ffb4e3;">{{ row[7] }}</td>
      <td style="background-color: #cbfd8d;">{{ row[6] }}</td>

      <td style="background-color: #99CCFF; font-weight: bolder; color: blue">{{ row[9] }}</td> 
      <!-- Chr -->

      <td>{{ row[5] }}</td>
    </tr>
    {% endfor %}
    
  </tbody>
</table>

<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Register Info</h4>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table">
          <tr>
            <td>
              <h4>Address</h4>
            </td>
            <td><span >{{ page_name }}</span> 
            /
            <span id="reg_address"></span></td>
          </tr>
          <tr>
            <td>
              <h4>Name</h4>
            </td>
            <td><span id="reg_name"></span></td>
          </tr>
          <tr>
            <td>
              <h4>Description</h4>
            </td>
            <td><span id="reg_description" class="text-info"></span></td>
          </tr>
          <tr>
            <td>
              <h4>Value</h4>
            </td>
            <td>
              <table id="wt">
                <tr>
                  {% for i in range(0,8) %}
                  <td class="txt1">
                    <input
                      id="rt_{{ 7 - i }}"
                      type="number"
                      min="0"
                      max="1"
                      step="1"
                      class="reg_bit"
                      value="0"
                      maxlength="1"
                    />
                  </td>
                  {% endfor %}

                  <td>&nbsp;</td>

                  <td class="txt3">
                    <input type="text" class="reg_val_hex" />
                  </td>

                  <td>&nbsp;</td>

                  <td class="txt2">
                    <input
                      type="number"
                      min="0"
                      max="255"
                      step="1"
                      class="reg_val_dec"
                    />
                  </td>
                </tr>

                <tr>
                  {% for i in range(0,8) %}
                  <td class="idx1">{{ 7 - i }}</td>
                  {% endfor %}
                  <td></td>
                  <td class="idx3">hex</td>
                  <td></td>
                  <td class="idx2">dec</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary reg_set" id="save_changes">
          Save changes
        </button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>


<div class="modal" tabindex="-1" role="dialog" id="myModal_get_vdm_all">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">VDM All</h4>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="vdm_all_info">
          
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success get_vdm_all_btn">
         Get VDM All
        </button>

        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>



<div class="modal" tabindex="-1" role="dialog" id="myModal_up_page_nav">
    <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Pages Navigation</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <table class="table">
        
        {% for page in pages %}
        <tr>
        {% for k,v in page.items() %}
        <td width="17%">
          <a href="/page_template?page_name={{ k }}" class="page_nav"><b>{{ k }} </b><br> 
            <span style="color: #aaa; font-size: 12px"> {{ v }} </span>
          </a>
        </td>
        {% endfor %}
        </tr>
        {% endfor %}

       <tr class="{{ for_customer }}">
        <td colspan="10">
          <span class="pull-right">
            <b>
            Jump to Page
            </b>
            &nbsp;&nbsp;
            0x&nbsp;<input style="width:45px; height:32px; type="text" id="jump_to_page">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-success" id="btn_jump_to_page">
              Go <i class="glyphicon glyphicon-arrow-right"></i>
            </button>
          </span>
        </td>
       </tr>

        </table>
      </div>
<!--       <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
      </div> -->
    </div>
  </div>
</div>
{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">
  var reg_type;


  function hide_description_cols() {
    $("tr.row_data").each(function(i, val) {
      // console.log(i);
      // console.log(val);
      $(this)
        .children("td")
        .each(function(j) {
          if (j == 2) {
            // reg_description = $(this).text();
            $(this).addClass("hide");
          }
        });
    });
  }

  function reg_value_bin_bind(reg_val_dec) {
    var reg_value_bin = parseInt(reg_val_dec).toString(2);
    var len = reg_value_bin.length;
    var bits_len = 8;
    if (len < bits_len) {
      for (var i = 0; i < bits_len - len; i++) {
        reg_value_bin = "0" + reg_value_bin;
      }
    }
    for (i = 0; i <= 7; i++) {
      console.log(reg_value_bin[i]);
      $("#rt_" + (7 - i)).val(reg_value_bin[i]);
    }
  }

  $(document).ready(function() {
    $(".reg_set").hide();
    hide_description_cols();

    // layer.alert("hello layer!");
    $(".refresh").click(function(){
       layer.load();
    });

    $(".page_nav").click(function(){
       layer.load();
    });


    $(".reg_bit").change(function() {
      var bin_str = "";
      // alert('reg bit change!');
      bin_str =
        $("#rt_7").val() +
        $("#rt_6").val() +
        $("#rt_5").val() +
        $("#rt_4").val() +
        $("#rt_3").val() +
        $("#rt_2").val() +
        $("#rt_1").val() +
        $("#rt_0").val();

      reg_val_dec = parseInt(bin_str, 2);
      $(".reg_val_dec").val(reg_val_dec);
      $(".reg_val_hex").val(reg_val_dec.toString(16));
    });

    $(".reg_val_dec").change(function() {
      // alert('reg_val_dec change!');
      reg_val_dec = $(".reg_val_dec").val();
      $(".reg_val_hex").val(parseInt(reg_val_dec).toString(16));
      reg_value_bin_bind(reg_val_dec);
    });

    $(".reg_val_hex").change(function() {
      // alert('reg_val_hex change!');
      reg_val_hex = $(".reg_val_hex").val();
      reg_val_dec = parseInt(reg_val_hex, 16);
      $(".reg_val_dec").val(reg_val_dec);
      reg_value_bin_bind(reg_val_dec);
    });

    $(".row_data").click(function() {
      $(this)
        .children("td")
        .each(function(j) {
          if (j == 0) {
            reg_address = $(this).text();
          }

          if (j == 1) {
            reg_name = $(this).text();
          }

          if (j == 2) {
            //hide
            reg_description = $(this).text();
          }

          //hex value
          if (j == 3) {
            reg_value_hex = $(this).text();
          }
          //dec value
          if (j == 4) {
            reg_value_dec = $(this).text();
          }

          //Chr : j== 5
          // pass

          //W/R Mask
          if (j == 6) {
            reg_type = $(this).text();
            if (reg_type != 0) {
              $(".reg_set").show();
              $(".reg_bit").attr("disabled", false);
              $(".reg_val_dec").attr("disabled", false);
              $(".reg_val_hex").attr("disabled", false);
            } else {
              $(".reg_set").hide();
              $(".reg_bit").attr("disabled", true);
              $(".reg_val_dec").attr("disabled", true);
              $(".reg_val_hex").attr("disabled", true);
            }
          }
        });

      //var options;
      $("#reg_address").text(reg_address);
      $("#reg_name").text(reg_name);
      $("#reg_description").html(reg_description);
      //bind reg vals to rt_7 ~ rt_0
      console.log(reg_value_dec);
      reg_value_bin_bind(reg_value_dec);
      $(".reg_val_dec").val(reg_value_dec);
      $(".reg_val_hex").val(reg_value_hex);

      $("#myModal").modal();
      return false;
    });

    $("#up_page_nav").click(function() {
      $("#myModal_up_page_nav").modal();
    });

    $("#get_vdm_all").click(function() {
      $("#myModal_get_vdm_all").modal();
    });

    // get vdm all info
    $(".get_vdm_all_btn").click(function() {
      $.get("api/get_vdm_all", function(data, status){
        console.log(data);
        // $("#img_fcr_capture").attr('src', data);
        $("#vdm_all_info").html(data);
      }); 
      
    });



    $("#btn_jump_to_page").click(function() {
      var jump_to_page_tmp = $.trim($('#jump_to_page').val());

      if (jump_to_page_tmp.length == 1)
      {
        jump_to_page = '0' + jump_to_page_tmp;
      }
      else
      {
        jump_to_page = jump_to_page_tmp;
      }

      console.log(jump_to_page);
      $.post("/jump_to_page",
      {
      },
      function(data,status){
        console.log("data: " + data);
        //reload this page
        location.href = "/page_template?page_name=Page_Blank_" + jump_to_page;
      });
    });    


    $("#save_changes").click(function() {
     
      var reg_val_hex = '0x' + $('.reg_val_hex').val();
      var reg_address = $("#reg_address").text();

      console.log(reg_address);
      console.log(reg_val_hex);

      $.post("/set_page_val",
      {
        reg_address: reg_address,
        reg_val_hex: reg_val_hex,
      },
      function(data,status){
        console.log("data: " + data);
        $('#myModal').modal('hide');
        //reload this page
        // alert("{{ page_name }}");
        location.href = "/page_template?page_name={{ page_name }}";
      });
    });

    layer.closeAll();
  });
</script>
{% endblock %}
